<template>
	<view class="dishListDetail">
		<uni-popup ref="message" type="message" class="edit-message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000" border-radius="100px"
				class="edit-message"></uni-popup-message>
		</uni-popup>
		<view class="headnavi">
			<image class="arrow" src="/static/home/main/details/arrow.png" @click="goBack()"></image>
			<view class="navi-title">菜单</view>
		</view>
		<view class="dish-list-box">
			<image class="dish-list-image" :src="dishList.imageSrc"></image>
			<view class="dish-list-info">
				<view class="title">
					<text class="header-medium-text">{{dishList.name}}</text>
				</view>

				<!-- <view class="collect">
					<text class="header-normal-text">{{collectorCount}}人收藏</text>
					<image class="addCollect" src='/static/home/main/details/collect.png'></image>
				</view>
				<view class="creator" >
					<image src="/static/chishenme/some-avatar.png" class="creatorAvatar"></image>
					<text class="header-normal-text">帕梅拉</text>
					<image src="/static/chishenme/guanzhu.png" class="follow"></image>

				</view> -->
			</view>
		</view>
		<view class="body">
			<view class="funtion-bar">
				<view class="eat" @click="">
					<image src="/static/home/main/details/icon-eat.png" class="icon-eat"></image>
					<text class="header-normal-text">随机吃一个</text>
				</view>
				<view class="add" @click="">
					<image src="/static/home/main/details/icon-add.png" class="icon-add"></image>
					<text class="header-normal-text">添加菜品</text>
				</view>

			</view>
			<view class="dish-container" v-for="(dish,index) in dishes" :key="index">
				<text class="dish-number">{{index+1}}</text>
				<image :src="dish.image" class="dish-img" @click="goDetail(dish.id)"></image>
				<view class="dish-info" @click="goDetail(dish.id)">
					<view class="info-column-one">
						<text class="header-medium-text">{{dish.name}}</text>
						<text class="pricing">估价 ￥ {{dish.price}}</text>
					</view>
					<view class="info-column-two">
						<text class="header-normal-text" @click="getRestaurantDetail(1)">{{dish.restaurantName}}</text>
					</view>
					<view class="info-column-three">

					</view>
				</view>
				<view class="operation" @click="showDelete(index)">
					<image src="/static/home/main/details/more.png" class="more"></image>
				</view>
				<text class="delete" v-if="dish.toBeDeleted" @click="confirmDeleteDishFromList(dish.id)">删除</text>
				<text class="cancel" v-if="dish.toBeDeleted" @click="cancelDelete(index)">取消</text>
			</view>
			<view class="empty" v-if="dishes.length===0">
				空空如也~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					userName: '',
					userImg: '',
					id: '',
					/* followersCount: 0, //关注的人
					fansCount: 0, //粉丝数 */
				},
				dishList: {
					id: 0,
					name: '',
					imageSrc: '',
				},
				dishes: [{
					id: 0,
					name: '',
					price: 0.0,
					image: '',
					restaurantId: 0,
					restaurantName: '',
					toBeDeleted: false,
				}, ],
			}
		},
		mounted() {
			this.storeDishList();
			/* this.remove(); */
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo.userName = userInfo.data.userName;
			this.userInfo.id = userInfo.data.id;
			this.getMenuDishes();
			this.getDishListImage(this.dishList.id);
		},
		onLoad(options) {
			if (options.id) {
				this.dishList.id = parseInt(options.id); // 转换为整数类型 

			}
			if (options.name) {
				this.dishList.name = options.name;
			}
		},
		methods: {
			popMessage(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},
			//缓存
			remove() {
				uni.removeStorageSync('recentDishLists');
			},
			storeDishList() {
				const id = this.dishList.id;
				if (id === 1) {
					return;
				}
				const key = 'recentDishLists_${userId}';
				uni.getStorage({
					key: key,
					success: (res) => {
						/* console.log(res); */
						let dishLists = res.data ? res.data : [];
						let found = false;
						for (var i = 0; i < dishLists.length; i++) {
							if (dishLists[i] === id) {
								found = true;
								break;
							}
						}
						if (!found) {
							dishLists.push(id);
							uni.setStorage({ // 更新存储的dishLists  
								key: key,
								data: dishLists,
								success: () => {
									console.log('ID已成功添加到缓存:', id);
								},
								fail: (err) => {
									console.error('更新缓存失败:', err);
								}
							});
						}
					},
					fail: (err) => {
						console.error(err);
						uni.setStorage({ // 更新存储的dishLists
							key: key,
							data: [],
							success: () => {
								console.log('初始化成功');
							},
							fail: (err) => {
								console.error('初始化失败', err);
							}
						});
					}
				});
			},
			//测试
			showDelete(index) {
				this.dishes[index].toBeDeleted = true;
			},
			cancelDelete(index) {
				this.dishes[index].toBeDeleted = false;
			},
			addDishTest() {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id +
					'/addDishToMenu?menuId=' + this.dishList.id + '&dishId=' + 1;
				uni.request({
					url: url,
					method: 'POST',
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getDishDetail(id) {
				const url = 'http://localhost:8080/dish/detail/' + id;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {

						console.log(res);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getRestaurantDetail(id) {
				const url = 'http://localhost:8080/restaurant/details/' + id;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			//页面跳转
			goDetail(id) {
				uni.navigateTo({
					url: '../details/details?id=' + id + ''
				})
			},
			goBack() {

				uni.switchTab({
					url: '/pages/my/my'
				})

			},
			//后端接口
			getDishListImage(id) {
				const url = 'http://localhost:8080/preference/getMenuImage/' + this.userInfo.id + '?menuId=' + id;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						if(res.data== '无菜单图片'){
							if(id!==1)
								this.dishList.imageSrc = '/static/chishenme/defaut-dish-list-image.png';
							else
								this.dishList.imageSrc = '/static/my/fav-grey.png';
						}
						else{
							this.dishList.imageSrc = res.data;
						}
						console.log(res);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			confirmDeleteDishFromList(id) {
				// 显示确认弹窗
				uni.showModal({
					title: '删除菜品',
					content: '确定要从菜单中删除这个菜品吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定
							this.deleteDishFromList(id);
						} else if (res.cancel) {
							// 用户点击了取消
							console.log('用户取消了添加');
						}
					},
					fail: (err) => {
						console.error('弹窗显示失败', err);
					}
				});
			},
			deleteDishFromList(id) {
				const url = 'http://localhost:8080/preference/' +
					this.userInfo.id + '/deleteDishFromMenu?menuId=' +
					this.dishList.id + '&dishId=' +
					id;
				uni.request({
					url: url,
					method: 'DELETE',
					success: (res) => {
						console.log(res);
						this.getMenuDishes();
						this.popMessage("success", "已删除菜品！");
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getMenuDishes() {
				const url1 = 'http://localhost:8080/preference/' + this.userInfo.id +
					'/getMenuDishes?menuId=' + this.dishList.id;
				uni.request({
					url: url1,
					method: 'GET',
					success: (res1) => {
						console.log("res1")
						console.log(res1.data)
						this.dishes = [];
						res1.data.data.forEach((value, index, data) => {
							if (value != -1) {
								const newDish = {
									id: 0,
									name: '',
									price: 0.0,
									image: '',
									restaurantId: 0,
									restaurantName: '',
								};

								const url2 = 'http://localhost:8080/dish/detail/' + value;
								uni.request({
									url: url2,
									method: 'GET',
									success: (res2) => {
										newDish.id = value;
										newDish.name = res2.data.data.name;
										newDish.price = res2.data.data.price;
										newDish.image = res2.data.data.image;
										newDish.restaurantId = res2.data.data.restaurantId;

										const url3 =
											'http://localhost:8080/restaurant/details/' +
											newDish.restaurantId;
										uni.request({
											url: url3,
											method: 'GET',
											success: (res3) => {
												newDish.restaurantName = res3
													.data.data.name;
												newDish.toBeDeleted = false;
												this.dishes.push(newDish);
												/* console.log(res3); */
											},
											fail: (err) => {
												console.error(err);
												// 在这里处理请求失败的逻辑
											}
										});

										console.log(res2);
									},
									fail: (err) => {
										console.error(err);
										// 在这里处理请求失败的逻辑
									}
								});

							}
						});
						/* console.log(res1); */
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	
	.dishListDetail {
		display: flex;
		flex-direction: column;
		background-color: #e5e5e5;
		.edit-message {
			border-radius: 30px;
			margin: 3vh 3vw 0 3vw;
			overflow: hidden;
		}
		//字体统一定义区
		.header-normal-text {
			font-size: 30rpx;
			color: #383838;
		}

		.header-medium-text {
			font-size: 37.5rpx;
			color: #383838;
			font-weight: bold;
		}

		.headnavi {
			height: 10%;
			width: 100%;
			background-color: white;
			position: sticky;
			display: flex;
			z-index: 2;
			padding-bottom: 35rpx;

			.arrow {

				width: 6vw;
				height: 3vh;
				margin-top: 5vh;
				margin-left: 5vw;
			}

			.navi-title {
				margin-top: 5vh;
				margin-left: 35vw;
				font-size: 40rpx;
				color: #FF8D1A;
			}
		}

		.dish-list-box {
			display: flex;
			padding-top: 17rpx;
			margin-left: 20rpx;
			padding-left: 17rpx;
			margin-right: 20rpx;
			padding-right: 17rpx;
			background-color: white;
			border-radius: 30rpx;

			.dish-list-image {
				width: 30vw;
				height: 30vw;
				border-radius: 20rpx;
			}

			.dish-list-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 17rpx;

				.title {
					.header-medium-text {}
				}

				.collect {
					display: flex;

					.header-normal-text {
						align-self: center;
					}

					.addCollect {
						width: 18vw;
						height: 10vw;
						align-self: center;
						margin-left: auto;
					}
				}

				.creator {
					display: flex;
					margin-top: auto;

					.header-normal-text {
						padding: 17rpx;
						align-self: center;
					}

					.creatorAvatar {
						width: 5vh;
						height: 5vh;
						align-self: center;
					}

					.follow {
						margin-left: auto;
						width: 17vw;
						height: 7vw;
						align-self: center;
					}
				}
			}
		}

		.body {
			display: flex;
			flex-direction: column;
			background-color: white;

			.funtion-bar {
				display: flex;
				height: 7vh;
				padding-left: 17rpx;
				border-bottom: 1rpx solid #d8dbe6;
				padding-right: 17rpx;

				.eat {
					display: flex;
					align-self: center;

					.icon-eat {
						width: 5vh;
						height: 5vh;
						align-self: center;
					}

					.header-normal-text {
						align-self: center;
						padding: 17rpx;
					}
				}

				.add {
					margin-left: auto;
					display: flex;
					align-self: center;

					.icon-add {
						align-self: center;
						width: 3vh;
						height: 3vh;
					}

					.header-normal-text {
						align-self: center;
						padding: 17rpx;
					}
				}
			}

		}

		.empty {
			margin: 0 2vw;
			padding: 0.5vh 0;
			font-size: 3vw;
			text-align: center;
			background-color: #F4F4F5;
			color: #9C9C9C;
			box-sizing: border-box;
			background-color: transparent;
		}

		.dish-container {
			display: flex;
			padding: 17rpx;
			position: relative;

			.dish-number {
				color: #8a8a8a;
				font-size: 50rpx;
				padding: 20rpx;
				align-self: center;
			}

			.dish-img {
				width: 20vw;
				height: 20vw;
				border-radius: 20rpx;
				align-self: center;
			}

			.dish-info {
				display: flex;
				flex-direction: column;
				align-self: center;

				.info-column-one {
					padding: 17rpx;

					.pricing {
						color: #FF8D1A;
						padding-left: 17rpx;
					}
				}

				.info-column-two {
					padding-left: 17rpx;
				}
			}

			.operation {
				margin-left: auto;
				align-self: center;

				.more {
					width: 10rpx;
					height: 50rpx;
					padding: 35rpx;
				}
			}

			.delete {
				position: absolute;
				z-index: 1000;
				right: 20rpx;
				padding: 20rpx;
				top: 25%;
				transform: translateY(-50%);
				box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
				background-color: #E5E5E5;
			}

			.cancel {
				position: absolute;
				z-index: 1000;
				right: 20rpx;
				padding: 20rpx;
				top: 75%;
				transform: translateY(-50%);
				box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
				background-color: #E5E5E5;
			}
		}
	}
</style>